<template>
    <div class="loginview" ref="loginview" :style="{background: 'url(' + loginBackgroundImg+ ')',backgroundSize:'100%'}">
        <div class="loginview-logo" v-show="loginMsg.distLogo">
            <img :src="loginMsg.distLogo"/>
        </div>
        <div class="loginview-title">精准拓客 合作共赢</div>
		<div class="content">
            <!----绑定---->
            <div v-show="isBind==0" class="loginBox">
                <bindingView></bindingView>
            </div>
            <!----找回密码---->
            <div v-show="isBind==3" class="loginBox">
                <retrievePsw></retrievePsw>
            </div>

		    <div v-show="isBind==1" class="loginWrap loginBox">

		       <div class="loginBox-title">
                   <div class="loginBox-title-text">
                       <div :class="optionShow==0?'loginBox-title-active':''" @click="loginMode(0)">二维码登录</div>
                       <div v-show="optionShow==0" class="loginBox-title-text-line"></div>
                   </div>
                   <div class="loginBox-title-text">
                       <div :class="optionShow==1?'loginBox-title-active':''" @click="loginMode(1)">账号密码登录</div>
                       <div v-show="optionShow==1" class="loginBox-title-text-line"></div>
                   </div>
               </div>
                <div v-show="optionShow==0">
                    <!-- <div class="code-img">
                        <img src="../../assets/img/1542079570.png" />
                    </div> -->
                    <div class="code-img" id="login_container">
                    </div>
                    <div class="code-remind">第一次扫码需验证账号密码进行登录</div>
                </div>
		        <div v-show="optionShow==1" class="login">
                    <div v-show="errmsg" class="login-errmsg">
                        <img src="../../assets/img/loginerrimg@2x.png"/>
                        <div >{{errmsg}}</div>
                    </div>
                    <form rel="form">
                        <div class="login-input">
                            <img class="login-input-icon" src="../../assets/img/Rectangle10@2x.png"/>
                            <input v-model="number" placeholder="账号" maxlength="50"/>
                        </div>
                        <!--<div class="login-errmsg">{{errmsg}}</div>-->
                        <div class="login-input">
                            <img class="login-input-icon" src="../../assets/img/Rectangle11@2x.png"/>
                            <input v-model="password" type="password"  placeholder="密码" maxlength="18" />
                        </div>
                        <div class="login-radio">
                            <!--<el-checkbox-group v-model="radio">-->
                                <!--<el-checkbox class="login-input-radio" label="记住登录" name="type"></el-checkbox>-->
                            <!--</el-checkbox-group>-->
                            <div class="login-radio-psw" @click="retrievePsw">忘记密码</div>
                        </div>

                        <div class="login-button" @click="gologin">登 录</div>
                    </form>
		        </div>
		    </div>

		</div>
        <div class="loginview-bottom">
            <div class="loginview-bottom-text">遇到登录问题，随时可咨询24小时在线客户<span>{{loginMsg.phone}}</span></div>
            <div class="loginview-bottom-text1">copyright @ 2018 {{loginMsg.companyName}}</div>
        </div>
    </div>
</template>

<script>
    import 'utils/wxLogin';
    import retrievePsw from './retrievePsw';
    import bindingView from './bindingView';
    import { isWscnEmail } from 'utils/validate';
    var AV = require('leancloud-storage');
    import  menus  from 'mock/mune';
    import md5 from 'js-md5';
    export default {
      name: 'login',
      data() {
        return {
            loginBackgroundImg:"",
            loginMsg:"",
            isBind:1,
            number:"",
            password:"",
            loading: false,
            optionShow:0,
            input21: '',
            input2:'',
            radio:false,
            errmsg:'',
            distributorId:this.$route.query.distributorId,
            enterpriseId:this.$route.query.enterpriseId,
        }
      },
        components: {
            retrievePsw,
            bindingView
            // console.log(this.$route.query.id)
        },
        watch: {
            number(val){
                if(val.length>0){
                    this.errmsg="";
                }
            },
            password(val){
                if(val.length>0){
                    this.errmsg="";
                }
            },
            '$route' () {
                console.log(1111);
                let code = this.$route.query.code;
                if(code){
                   this.getUserInfo(code)
                }
            }
      },
       mounted:function(){

          let userIdentification={
              distributorId:this.$route.query.distributorId,
              enterpriseId:this.$route.query.enterpriseId,
          }
          
          sessionStorage.setItem("userIdentification", JSON.stringify(userIdentification));
          this.getLogoMsg(userIdentification.distributorId,userIdentification.enterpriseId)
            var obj = new WxLogin({
                self_redirect:"true",
                id: "login_container",
                appid: "wxdd348e2448a81042",
                scope: "snsapi_login",
                redirect_uri: encodeURIComponent(window.location.href),
                state: Math.ceil(Math.random()*1000),
                style: "black",
                href: window.location.origin+"/static/wx/css/qrcode.css"});
       },
       created:function(){
        
       },
      methods: {
          //获取logo
          getLogoMsg(distributorId,enterpriseId){
              let _this = this;
              let params={
                  distributorId:distributorId,
                  enterpriseId:enterpriseId,
              }
              _this.Api.setting.enterpriseBcinfo(params).then((data)=>{
                  this.loginMsg=data.data
                  this.loginBackgroundImg=data.data.loginBackgroundImg?data.data.loginBackgroundImg:require("../../assets/img/bg.png")
                  console.log("xxxxxxxxxxxxxxxxxxx",data)
              })
          },
          //登录方式切换
        loginMode(num){
            this.optionShow=num
        },
          //表单验证
          valusernum(num) {
              var re = /^[A-Za-z0-9]+$/;
              return re.test(num);
          },
          //扫码登陆回调
          getUserInfo(code){
            let _this = this;
            let params={
                code:code,
                appId:'wxdd348e2448a81042',     
                distributorId:this.$route.query.distributorId,
                enterpriseId:this.$route.query.enterpriseId
            }
            this.Api.auth.getUserInfo(params).then((data)=>{

                if(data.returnCode == 10000){
                    window.localStorage.setItem('wxMpUser', JSON.stringify(data.data.wxMpUser));
                    if(data.data.isBind){                  
                        let token = data.data.userToken.token;
                        let userdata=data.data.distributor
                        this.$store.dispatch("SET_USER_DATA", {
                            token: token,
                            userName:"",
                            userMsg: userdata
                        });
                        this.$store.dispatch('SET_MENUS', menus)
                        this.$router.push({ path: '/' });
                     }else{
                        _this.isBind = 0;
                        _this.wxMpUser = data.data.wxMpUser;
                    }
                }
            });
          },
          gologin(){
            let _this = this;
            if(this.number==""){
                this.errmsg = '请输入用户名'
            }else if(!this.valusernum(this.number)){
                this.errmsg = '账号只能由数字和字母组成'
            }else if(this.password==""&&this.number!=="") {
                this.errmsg = '请输入密码'
            }else if(this.password==""&&this.number=="") {
                this.errmsg = '请输入用户名和密码'
            }else if(this.password.length<6||this.password.length>18) {
                this.errmsg = '请输入6到18位的密码'
            }else {
                let params = {
                    username: this.number,
                    password:this.password,
                    remember:this.radio,
                    distributorId:_this.distributorId,
                    enterpriseId:_this.enterpriseId,
                    // distributorId:183,
                    // enterpriseId:90,
                }
                _this.Api.setting.distLogin(params).then((data) => {
                    //test token
                   /* let token = 'eyJhbGciOiJIUzUxMiJ9.eyJyYW5kb21LZXkiOiJ1Ynp1aGQiLCJzdWIiOiJwcmVfdXNlcklkLTExMzpwcmVfYWNjb3VudC0xODkwNzQzNzIwMDpwcmVfZGlzdHJpYnV0b3JJZC0xMjMiLCJleHAiOjE1NDQwODAyNDMsImlhdCI6MTU0MzQ3NTQ0M30.dl8OJJP_6sdy27uIOBiRRWbtlvkLMvW1AfCNpel8ZrJk1iBCI-1CY12TJU9zTLD2jnHLmt0s5FoE7pMNQsBCtw'*/
                    let token = data.data.userToken.token;
                    let userdata=data.data.distributor
                    this.$store.dispatch("SET_USER_DATA", {
                        token: token,
                        userName:"",
                        userMsg: userdata
                    });
                    this.$store.dispatch('SET_MENUS', menus)
                    this.$router.push({ path: '/' });

                }).catch((err) => {
                    // this.$alert('登录失败', '温馨提示', {
                    //     confirmButtonText: '确定',
                    //     callback: action => {
                    //         this.$message({
                    //             type: 'info',
                    //             message: `action: ${ action }`
                    //         });
                    //     }
                    // });
                });

            }

            // let parm = this.loginForm;
            // if (parm.name.length == 0) {
            //     this.errmsg = '请输入用户名'
            //     return ;
            // }
            // if (parm.password.length < 6) {
            //     this.errmsg = '密码不能小于6位'
            //     return ;
            // }
            // parm.password = md5(parm.password)
            // this.Api.auth.login(parm).then((data)=>{
            //     if(data.code == this.Api.resultCode.SUSS){
            //         let m = data.data.res;
            //         this.$store.dispatch("SET_USER_DATA", {
            //             token:data.data.token,
            //             userName:data.data.user.name,
            //             roleName:data.data.user.roleName,
            //             roleuuids:data.data.user.roleuuids,
            //             uuid:data.data.user.uuid,
            //             roleCode:data.data.user.roleCode,
            //             realname:data.data.user.realname,
            //             partnerUuid:data.data.user.partner_uuid
            //         });
            //         this.$store.dispatch('SET_MENUS',m)
            //         this.$router.push({ path: '/' });

            //         this.getRongyunToken(data.data.user.uuid);
            //     }
            // });
        },
          //找回密码
          retrievePsw(){
              this.isBind=3
          }
      },

    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.loginview{
    width:100%;
    height:100%;
    position: absolute;
    background-size: 100% !important;
    .loginview-title{
        width: 100%;
        height: 45px;
        font-size:32px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(24,144,255,1);
        line-height:45px;
        text-align: center;
        margin-top: 32px;
        margin-bottom: 38px;
    }
    .loginview-logo{
        margin: 31px;
        img{
            width: 175px;
            height: 55px;
        }
    }
    .loginBox{
        width:380px;
        min-height:346px;
        background:rgba(255,255,255,1);
        border-radius:4px;
        border:1px #D3D8DE solid;
        margin: 0 auto;
        .loginBox-title{
            display: flex;
            margin-top: 31px;
            margin-bottom: 28px;
            .loginBox-title-text{
                width: 50%;
                text-align: center;
                font-size:16px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(0,0,0,0.65);
                line-height:24px;
                .loginBox-title-active{
                    color:rgba(24,144,255,1);
                }
                .loginBox-title-text-line{
                    width:56px;
                    height:2px;
                    background:rgba(24,144,255,1);
                    border-radius:1px;
                    margin:0 auto;
                    margin-top: 8px;
                }
            }
        }

        .code-img{
            width:180px;
            height:180px;
            background:rgba(255,255,255,1);
            border-radius:0px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }
        .code-text{
            font-size:12px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(0,0,0,0.65);
            line-height:22px;
            text-align: center;
            margin-top: 21px;
        }
        .code-remind{
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(24,144,255,1);
            line-height:22px;
            text-align: center;
            margin: 20px 0px;
        }
        .login-input{
            width:332px;
            height:40px;
            background:rgba(255,255,255,1);
            border-radius:4px;
            border:1px #CED3D9 solid;
            margin: 0 auto;
            display: flex;
            margin-bottom: 24px;
            input{
                border: none;
                font-size:16px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(0,0,0,0.65);
                line-height:24px;
                background-color: #ffffff;
            }
            input::-webkit-input-placeholder{
                font-size:16px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(0,0,0,0.25);
                line-height:24px;
            }
            input::-moz-placeholder{
                font-size:16px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(0,0,0,0.25);
                line-height:24px;
            }
            input:-ms-input-placeholder {
                font-size:16px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(0,0,0,0.25);
                line-height:24px;
            }

            .login-input-icon{
                width: 16px;
                height: 16px;
                align-self: center;
                margin:0px 12px;

            }
        }
        .login-radio{
            width:332px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        .login-input-radio{
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(0,0,0,0.65);
            line-height:22px;
            align-self: center;
        }
            .login-radio-psw{
                font-size:14px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(24,144,255,1);
                line-height:22px;
                align-self: center;
                margin-left: 274px;
            }
        }
        .login-button{
            width:332px;
            height:40px;
            background:rgba(24,144,255,1);
            border-radius:4px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:40px;
            text-align: center;
            margin: 0 auto;
            margin-top: 24px;
            margin-bottom: 43px;
        }
        .login-errmsg{
            width:332px;
            height:40px;
            line-height: 40px;
            background:rgba(245,69,34,0.1);
            border-radius:4px;
            border:1px #F54522 solid;
            margin: 0 auto;
            font-size:13px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(245,69,34,1);
            margin-bottom: 12px;
            display: flex;
            img{
                width: 16px;
                height: 16px;
                align-self: center;
                margin: 0px 11px;
            }
            div{
                align-self: center;
            }
        }
    }
    .loginview-bottom{
        width: 100%;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.45);
        text-align: center;
        position: absolute;
        bottom: 24px;
        .loginview-bottom-text{
            font-size:14px;
            line-height:22px;
            margin-bottom: 8px;
            span{
                color:rgba(24,144,255,1);
                margin-left: 5px;
            }
        }
        .loginview-bottom-text1{
            font-size:12px;
            line-height:20px;
        }
    }
}

</style>
